<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ul li{ list-style: none; }
    </style>
</head>
<body>
    <!-- v-for把一个数组对应为一组元素 -->
    <ul id="example-1">
        <li v-for="item in items">
            {{item.message}}
        </li>
    </ul>

    <!-- 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。
    v-for 还支持一个可选的第二个参数为当前项的索引。 -->
    <ul id="example-2">
        <li v-for="(item, index) in items">
            {{parentMessage}} - {{index}} - {{item.message}}
        </li>
    </ul>

    <!-- 也可以用 of 替代 in 作为分隔符， -->
    <div id="example-3">
        <li v-for="(name,index) of names">
            {{parentMessage}} - {{name}} - {{index}}
        </li>
    </div>

    <!-- 一个对象的V-for -->
    <ul id="v-for-object" class="demo">
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>

    <!-- 第二个的参数为键名: -->
    <div id="app2">
        <ul  v-for="item in object">
            <li v-for="(value,key) in item">
                {{key}}:{{value}}
            </li>
        </ul>
    </div>

    <div id="app3">
        <ul v-for="item in object">
            <li>
                姓名:{{ item.name}} 性别:{{ item.sex}} 年龄:{{item.age}}
            </li>
        </ul>
    </div>
    <div id="app4">
        <li v-for="n in evenNumbers">{{ n }}</li>
    </div>
</body>
<script src="./vue.js"></script>
<script src="main.js"></script>
</html>